<template>
  <view class="files-img">
    <uni-section title="选择图片上传" type="line">
      <view class="files-upload">
        <button class="red-btn" size="mini" @click="handleOpen"> 图片上传发布 </button>
      </view> 
    </uni-section>
    <!-- 新增图片-弹窗 -->
    <uni-popup class="file-popup" ref="popupRef" type="bottom" background-color="#fff">
      <view class="file-popup-content">
        <uni-forms :rules="formRules" label-align="center" class="file-popup-form">
          <uni-forms-item label="图片:" required>
            <uni-file-picker
              v-model="imgValue"  
              name="img"
              file-mediatype="image"
              mode="grid"
              file-extname="png,jpg"
              :limit="1"
              @progress="uploadProgress" 
              @success="uploadSuccess" 
              @fail="uploadFail" 
              @select="uploadSelect"
            ></uni-file-picker>
          </uni-forms-item>
          <uni-forms-item label="标题:" required>
            <uni-easyinput type="text" v-model="imgTitle" name="title" placeholder="添加标题" />
          </uni-forms-item>
          <button class="red-btn" @click="handlePublish"> 发布 </button>
        </uni-forms>
      </view>
    </uni-popup>
    <!-- 图片列表 -->
    <uni-row class="demo-uni-row">
    	<uni-col :span="12" class="files-card" v-for="(item,index) in imagesData" :key="index">
    		<uni-card>
    			<template v-slot:cover>
    			  <image class="files-imgOne" :src="item.imageUrl" mode="aspectFit" />
    			</template>
          <view class="files-title">
            <text >{{item.title}}</text>
          </view>
    			<template v-slot:actions>
    				<view class="card-actions">
    					<view class="card-actions-item" @click="handleShare">
    						<uni-icons type="redo-filled" size="18" color="#999"></uni-icons>
    						<text class="card-actions-item-text">分享</text>
    					</view>
    					<view class="card-actions-item">
    						<uni-icons type="heart" size="18" color="#999"></uni-icons>
    						<text class="card-actions-item-text">点赞</text>
    					</view>
    					<view class="card-actions-item">
    						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
    						<text class="card-actions-item-text">评论</text>
    					</view>
    				</view>
    			</template>
    		</uni-card>
    	</uni-col>
    </uni-row>
    
  </view>
</template>

<script setup>
 import { onMounted, ref } from 'vue'
 
  const popupRef = ref(null)
  const handleOpen = ()=>{
    popupRef.value.open()
  }
  
  // 表单--必填规则
  const formRules = ref({
    img: {
      rules: [{ required: true, errorMessage: '必填' }]
    },
    title: {
      rules: [ { required: true, errorMessage: '必填' } ]
    }
  })
  const imgValue = ref([])  // 图片
  const imgTitle = ref('')  // 标题
  
  // 上传图片
  const uploadProgress = (val)=>{
    console.log('Progress==>',val);
  }
  const uploadSuccess = (files)=>{
    console.log('Success==>',files);
  }
  // 上传失败
  const uploadFail = (files)=>{
    console.log('Fail==>',files);
  }
  // 上传选择 
  const uploadSelect = (files)=>{
    console.log('Select==>',files);
    imgValue.value = files.tempFiles[0]
  }
  
  // 发布
  const handlePublish = async()=>{
    let data = {
      title: imgTitle.value,
      imageFiles: JSON.stringify(imgValue.value), 
      imageUrl: imgValue.value.url
    }
    console.log('--提-->',data);
    const { data: res } = await uni.$http.post('/publishImages',data)
    if (res.success) {
      popupRef.value.close()
      getImageData()  // 刷新信息
    } 
    uni.showToast({ title: res.msg, duration: 3000, icon:'none' }) 
  }
  
  const imagesData = ref([])
  
  // 获取图片列表数据
  const getImageData = async ()=>{
    const { data: res } = await uni.$http.get('/getImageFiles',{ type: 0 })
    if (res.success) {
      imagesData.value = res.data
    } 
    uni.showToast({ title: res.msg, duration: 3000, icon:'none' }) 
  }
  onMounted(()=>{
    getImageData()  // 刷新信息
  })
  
  // 分享
  const handleShare = ()=>{
   // 方案1：环境判断
   if (typeof uni !== 'undefined' && uni.share) {
     uni.share();
   } else {
     console.warn('当前环境不支持uni.share');
   }
  }
  
  
  
  
</script>

<style lang="scss">
  .files-img {
    width: 100%;
    height: 100%;
    .file-popup{
      text-align: center;
      .file-popup-content{
        width: 95%;
        padding-top: 20px;
        padding-left: 5px;
        margin-bottom: 100px;
      }
    }
    .file-popup-form{
      width: 100%;
      background-color: pink;
    }
   .files-upload{
     padding-left: 35%;
     padding-bottom: 15px;
   }
    .files-imgOne{
      width: 100%;
    }
    .files-card{
      height: 320px;
    }
    .card-actions{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20rpx;
    }
    .files-title{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1; // 限制显示2行
      overflow: hidden;
      width: 100%;
    }
  }
</style>
